<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .input-group {
            margin-bottom: 10px;
        }

        input {
            outline: none;
            border: 1px solid #333;
        }
    </style>
</head>

<body>
    <!-- <form action="" onsubmit="return false"></form> -->
    <form action="" onsubmit="return false">
        <div class="input-group">
            <label>
                用户名:
                <input type="text" name="user">
                <span></span>
            </label>
        </div>
        <div class="input-group">
            <label>
                密&emsp;码:
                <input type="text" name="pwd">
            </label>
        </div>
        <div class="input-group">
            <label>
                年&emsp;份:
                <!-- select>option*22[value='20$$']{20$$} -->
                <select name="year" id="">
                    <option value="2001">2001</option>
                    <option value="2002">2002</option>
                    <option value="2003">2003</option>
                    <option value="2004">2004</option>
                    <option value="2005">2005</option>
                    <option value="2006">2006</option>
                    <option value="2007">2007</option>
                    <option value="2008">2008</option>
                    <option value="2009">2009</option>
                    <option value="2010">2010</option>
                    <option value="2011">2011</option>
                    <option value="2012">2012</option>
                    <option value="2013">2013</option>
                    <option value="2014">2014</option>
                    <option value="2015">2015</option>
                    <option value="2016">2016</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                    <option value="2021">2021</option>
                    <option value="2022">2022</option>
                </select>
            </label>
        </div>
        <div class="input-grout">
            <input type="submit" value="提交">
            <button>提交</button>
            <input type="reset" value="重置">
        </div>
    </form>

</body>
<script>

    // 表单相关的事件
    // onfocus  表单聚焦
    // onblur   表单失焦
    // onchange 表单内容改变时触发
    //    a. (input textarea) 表单内容改变 + 失焦
    //    b. (input textarea) 按回车键触发 (如果有表单提交 => 触发表单提交)
    //    c. 下拉框选项切换时 

    // oninput 表单内容改变时触发

    // onsubmit  表单提交( 绑定给form元素,由提交按钮 button触发)
    // onreset   表单提交( 绑定给form元素,由reset按钮 button触发)

    var form = document.getElementsByTagName("form")[0];
    var userInp = document.getElementsByName("user")[0];
    var pwdInp = document.getElementsByName("pwd")[0];
    var yearSel = document.getElementsByName("year")[0];

    userInp.onfocus = function () {
        console.log("user 聚焦");
        userInp.style.borderColor = "orange";
    }
    // userInp.onblur = function () {
    //     console.log("user 失焦");
    //     userInp.style.borderColor = "#333";
    //     var user = userInp.value;
    //     if (user.length >= 6 && user.length <= 12) {
    //         this.nextElementSibling.textContent = "√";
    //     } else {
    //         this.nextElementSibling.textContent = "用户名需要在6-12位之间";
    //     }
    // }

    // userInp.onchange = function () {
    //     console.log("user change");
    //     userInp.style.borderColor = "#333";
    //     var user = userInp.value;
    //     if (user.length >= 6 && user.length <= 12) {
    //         this.nextElementSibling.textContent = "√";
    //     } else {
    //         this.nextElementSibling.textContent = "用户名需要在6-12位之间";
    //     }
    // }

    // yearSel.onchange = function () {
    //     console.log(this.value, this.selectedIndex);
    // }

    userInp.oninput = function () {
        console.log("user input");
        userInp.style.borderColor = "#333";
        var user = userInp.value;
        if (user.length >= 6 && user.length <= 12) {
            this.nextElementSibling.textContent = "√";
        } else {
            this.nextElementSibling.textContent = "用户名需要在6-12位之间";
        }
    }


    form.onsubmit = function () {
        console.log("表单提交");

        return false; // 阻止浏览器默认提交
    }
    form.onreset = function () {
        console.log("表单重置");
    }
</script>

</html>